<template>
  <div class="top-left-cmp">
    <div class="dc-left">
      <dv-border-box-5>
        <div class="main-value"><span>{{ pay_amount }}</span></div>
        <div class="compare-value"><span>人数</span>{{ pay_count }}</div>
        <!-- <div class="compare-value"><span>新玩家</span>100</div> -->
      </dv-border-box-5>
      <div class="dc-text">
        注册数
        <dv-decoration-3 style="width:200px;height:20px;" />
      </div>
    </div>
    <div class="dc-right">
      <div class="dc-text">
        当日充值情况
        <dv-decoration-3 style="width:200px;height:20px;" />
      </div>
      <dv-border-box-5 :reverse="true">
        <div class="main-value"><span>{{ today }}</span></div>
        <div class="compare-value"><span>昨日</span>{{ yesterday }}</div>
      </dv-border-box-5>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index.js'
import { paydata, installdata } from '@/api/chart'

export default {
  name: 'TopLeftCmp',
  data() {
    return {
      pay_amount: 0,
      pay_count: 0,
      today: 0,
      yesterday: 0
    }
  },
  mounted() {
    this.getPayData()
    this.getInstallData()
  },
  methods: {
    getPayData() {
      paydata().then(response => {
        const data = response.data[0]
        this.pay_amount = data.pay_amount
        this.pay_count = data.pay_count
      })
    },
    getInstallData() {
      const query = { 'datetime': [new Date(Date.now() - 3600 * 1000 * 24 * 1), new Date()] }
      installdata(query).then(response => {
        this.handleData(response.data)
      })
    },
    handleData(data) {
      const todayDate = parseTime(new Date(), '{y}-{m}-{d}')
      const preDate = parseTime(new Date(Date.now() - 3600 * 1000 * 24 * 1), '{y}-{m}-{d}')
      data.forEach(item => {
        if (item.inst_date === todayDate) this.today += parseInt(item.inst_count)
        if (item.inst_date === preDate) this.yesterday += parseInt(item.inst_count)
      })
    }
  }
}
</script>

<style lang="scss">
.top-left-cmp {
  display: flex;

  .dc-left, .dc-right {
    width: 50%;
  }

  .dv-border-box-5 {
    height: 60%;
  }

  .dc-text {
    display: flex;
    flex-direction: column;
    height: 40%;
    font-size: 20px;
    padding: 20px;
    box-sizing: border-box;
  }

  .dc-left .dc-text {
    align-items: flex-end;
    justify-content: center;
  }

  .dc-right .dc-text {
    justify-content: flex-start;
    padding-top: 20px;
  }

  .dc-left .dv-border-box-5 {
    padding: 30px;
    box-sizing: border-box;
  }

  .dc-right .dv-border-box-5 {
    padding: 40px;
    padding-left: 75px;
    box-sizing: border-box;
  }

  .main-value {
    font-weight: bold;
    font-size: 30px;

    span {
      font-size: 50px;
      color: #00c0ff;
      margin-right: 15px;
    }
  }

  .compare-value {
    height: 35px;
    line-height: 35px;
    font-size: 18px;

    span {
      margin-right: 30px;
    }
  }
}
</style>
